<template>
    <div class="works-cochain">
        <el-form  :model="ruleForm" :rules="rules" ref="rule" label-width="100px" class="demo-ruleForm">
          <div class="top-seek">
              <el-input v-model="ruleForm.name" placeholder="搜索作品" class="seek-inp"> <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
              <el-button  @click="getUserWorks" type="primary" class="seek">查询</el-button>
              <!-- 检索审核状态--------------------------------- -->
              <div class="audit">
                <el-select v-model="ruleForm.nftStatus" placeholder="审核状态">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <el-button  @click="toPage(1)" class="putIn">申请上链</el-button>
          </div>
          <!-- 表格---------------------------------------------------- -->
          <div>
            <!-- <el-form-item prop="smoothly"> -->
              <el-table
                :data="tableData">
                <el-table-column
                  prop="name"
                  label="作品名称"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="cover"
                  label="作品图片"
                  >
                  <template slot-scope="scope">
                    <el-image class="cover-img" :src="scope.row.cover"></el-image>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="nftStatus"
                  label="上链状态"
                  >
                  <template slot-scope="scope">
                    {{cochainStatus[scope.row.nftStatus]}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="提交时间"
                >
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100"
                >
                <template slot-scope="scope">
                  <el-button type="primary" size="small" v-if="scope.row.nftStatus==3|| scope.row.nftStatus==1" @click="toPage(scope.row.workId,true)">详情</el-button>  
                  <el-button type="primary" size="small" v-if="scope.row.nftStatus==2" @click="toPage(scope.row.workId,true)">重新提交</el-button>  

                </template>
                </el-table-column>
              </el-table>
            <!-- </el-form-item> -->
          </div>
        </el-form>
        <!-- 分页-------------------------------------------- -->
        <div class="mineEpaging">
          <el-pagination
            background
            v-if='pageTotal >=0'
            :page-sizes="paginations.pageSizes"
            :page-size="paginations.pageSize"
            :layout="paginations.layout"
            :total="pageTotal"
            :current-page='paginations.page'
            @current-change='handleCurrentChange'
            @size-change='handleSizeChange'
            >
          </el-pagination>
        </div>
      </div>
</template>

<script>
import { getWorkList } from '@/api/work'
export default {
  data(){
    return{
      input:'',
      // 搜索框
      ruleForm:{
        name:'',
        nftStatus:''
      },
      rules:{},
      // 审核状态
      value:'',
      options:[
        {
          label: '未提交',
          value: '0'
        },{
          label: '审核中',
          value: '1'
        },{
          label: '审核未通过',
          value: '2'
        },{
          label: '审核通过',
          value: '3'
        }
      ],
      cochainStatus:{
        '0':'未提交',
        '1':'审核中',
        '2':'审核未通过',
        '3':'审核通过'
      },
      // 表格
      tableData:[{
          name:'',
          cover:'',
          examineStatus:[],
          createTime:'',
          count:''
        }],
        pageTotal:0,
        paginations: {
        page: 1,  // 当前位于哪页
        pageSize: 5,   // 1页显示多少条
        pageSizes: [5, 10, 15, 20],  //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
      },
    }
  },
  mounted(){
    // this.getUserWorks();
    this.getDataList()
  },
  methods:{


    getUserWorks(){
      getWorkList(this.ruleForm).then((res)=>{
        console.log(res.data.workList.rows);
        this.tableData = res.data.workList.rows;
      })
    },
  toPage(e,isEdit){
    console.log('static223',e);
    if(e!=1){
      this.$router.push(`/process?workId=${e}&isEdit=${isEdit}`); 
    } else{
      this.$router.push('/process');
    }

  },
  getDataList(){
      getWorkList({
        pageSize: this.paginations.pageSize,
        page: this.paginations.page
      }).then((res)=>{
        // this.workData = res.data.workList.rows;
        this.pageTotal = res.data.workList.count;
        this.tableData = res.data.workList.rows;
      })
    },
  handleCurrentChange(page){
      this.paginations.page = page;
      this.getDataList()
    },
      // 每页多少条切换 pageSize
    handleSizeChange(page_size){
      this.paginations.pageSize = page_size;
      console.log('static',page_size);
      this.getDataList()
    }
  }
}
</script>

<style scoped lang="less">
.el-main{
    .top-seek{
    display: flex;
    margin-left: 100px;
    .seek-inp{
      margin-right: 100px;
      width: 610px;
    }
    .seek{
      margin: 0px 55px 0 -170px;
      z-index: 999;
    }
    .audit{
      margin-right: 70px;
    }
  }
  .cover-img{
    width: 100px;
    height: 100px;
  }
  .partPage{
    margin-left: 740px;
  }
  .mineEpaging{
    margin: 0px 0 0px 700px;
  }
}

</style>